// directives/permission.ts
import { App, DirectiveBinding } from 'vue'
import router from '@/router'
import { checkPermission } from '@/utils/PermissionUtil' // 直接导入路由实例（网页6）

export const registerPermissionDirective = (app: App) => {
  app.directive('permission', {
    mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
      const doCheckPermission = () => {
        el.style.display = 'none' // 初始隐藏
        const route = router.currentRoute.value
        const hasPermission = checkPermission(route, binding.value)

        el.style.display = hasPermission ? '' : 'none'
      }

      // 使用 watchEffect 确保在组件上下文中响应路由变化
      // const stopWatch = watchEffect(() => {
      //   checkPermission()
      // })

      doCheckPermission()
    }
  })
}
